<template>
    <div class="file-tree">
      <el-tree
        :data="treeData"
        :props="treeProps"
        node-key="path"
        highlight-current
        @node-click="handleNodeClick"
      >
        <template #default="{ node, data }">
          <div class="tree-node">
            <span :class="['file-name', { 'has-issues': data.issueCount > 0 }]">
              {{ node.label }}
            </span>
            <el-tag 
              v-if="data.issueCount > 0" 
              size="small" 
              :type="getSeverityType(data.highestSeverity)"
            >
              {{ data.issueCount }} issues
            </el-tag>
          </div>
        </template>
      </el-tree>
    </div>
  </template>
  
  <script setup>
  // eslint-disable-next-line no-unused-vars
  import { ref, computed } from 'vue'
  
  const props = defineProps({
    results: {
      type: Array,
      required: true
    }
  })
  
  const emit = defineEmits(['file-selected'])
  
  const treeProps = {
    label: 'name',
    children: 'children'
  }
  
  const treeData = computed(() => {
    const filesMap = {}
    
    props.results.forEach(result => {
      if (!result.file) return
      
      const parts = result.file.split('/')
      let currentLevel = filesMap
      
      parts.forEach((part, index) => {
        if (!currentLevel[part]) {
          currentLevel[part] = {
            name: part,
            path: parts.slice(0, index + 1).join('/'),
            children: {},
            issueCount: 0,
            highestSeverity: null
          }
        }
        
        if (index === parts.length - 1) {
          currentLevel[part].issueCount = (currentLevel[part].issueCount || 0) + 1
          
          // Update highest severity
          const severityOrder = { critical: 5, high: 4, medium: 3, low: 2, info: 1 }
          const currentSeverity = result.severity || 'medium'
          if (!currentLevel[part].highestSeverity || 
              severityOrder[currentSeverity] > severityOrder[currentLevel[part].highestSeverity]) {
            currentLevel[part].highestSeverity = currentSeverity
          }
        }
        
        currentLevel = currentLevel[part].children
      })
    })
    
    const buildTree = (nodes) => {
      return Object.values(nodes).map(node => {
        const children = Object.keys(node.children).length > 0 
          ? buildTree(node.children) 
          : []
        return {
          ...node,
          children
        }
      })
    }
    
    return buildTree(filesMap)
  })
  
  function getSeverityType(severity) {
    const map = {
      critical: 'danger',
      high: 'warning',
      medium: 'info',
      low: 'success',
      info: ''
    }
    return map[severity] || 'info'
  }
  
  function handleNodeClick(node) {
    if (node.children && node.children.length > 0) return
    emit('file-selected', node.path)
  }
    // 实际使用 filePath 参数，或者移除它
   
  </script>
  
  <style scoped>
  .file-tree {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 10px;
    height: 400px;
    overflow-y: auto;
  }
  
  .tree-node {
    display: flex;
    align-items: center;
    width: 100%;
  }
  
  .file-name {
    margin-right: 10px;
  }
  
  .has-issues {
    font-weight: bold;
  }
  
  .el-tree :deep() .el-tree-node__content {
    height: 36px;
  }
  </style>
  